Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Resolve search block button text overlapping issue. #66868

Merged
merged 3 commits into from
Nov 22, 2024
Merged

Resolve search block button text overlapping issue. #66868

merged 3 commits into from
Nov 22, 2024

Conversation

snehapatil2001
Copy link
Contributor

@snehapatil2001 snehapatil2001 commented Nov 8, 2024 •
edited
Loading

What?

This PR addresses an issue with the "Search Block" where the button text overlaps when the "Change button position" is set to "Button Only" and the block width is adjusted to 25% in the block settings.

#66852
#66871

Why?

This PR is necessary to improve the display and functionality of the Search Block when specific settings are applied. Currently, setting the button position to "Button Only" and resizing the block width to 25% causes the button text to overflow, resulting in an inconsistent and undesirable UI.

How?

The PR resolves the issue by removing specific CSS styling that contributed to the overlapping of the button text. The removed styles were causing the button to not resize correctly within the limited width of the block.

Testing Instructions

  1. Open a post or page.
  2. Insert a Search Block.
  3. Set the "Button Position" to "Button Only" in the block settings.
  4. Change the block width to 25%.
  5. Verify that the button text no longer overlaps and that it adjusts correctly within the resized block.

Testing Instructions for Keyboard

  1. Follow the steps above to set up the Search Block.
  2. Use the keyboard to navigate to and interact with the button.
  3. Ensure that the button text is visible and accessible, and no overlapping occurs when interacting with it.

Screenshots or screencast

Frontend in desktop Screen

Before After
Tablet Before Tablet After

Editor in Mobile Screen

Before After
Mobile Before Mobile After

Frontend in Mobile Screen

Before After
Desktop Before Desktop After

@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 8, 2024 •
edited
Loading

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: snehapatil2001 <snehapatil02@git.wordpress.org>
Co-authored-by: gziolo <gziolo@git.wordpress.org>
Co-authored-by: viralsampat-multidots <mdviralsampat@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@snehapatil2001 snehapatil2001 changed the title chore: fix styling. Resolve search block button text overlapping issue. Nov 8, 2024
@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Block] Search Affects the Search Block - used to display a search field labels Nov 8, 2024
@t-hamano t-hamano linked an issue Nov 8, 2024 that may be closed by this pull request
Search block button text overlapping. #66852
Closed
6 tasks
@snehapatil2001 snehapatil2001 mentioned this pull request Nov 8, 2024
Closed
6 tasks
@youknowriad youknowriad added the Good First Review A PR that's suitable for someone looking to contribute for the first time by reviewing code label Nov 8, 2024
@gziolo
Copy link
Member

gziolo commented Nov 22, 2024

Tested at WordCamp Wrocław. Everything works as advertised.

@gziolo gziolo merged commit 4337e35 into WordPress:trunk Nov 22, 2024
65 checks passed
@gziolo gziolo mentioned this pull request Nov 22, 2024
Closed
6 tasks
@github-actions github-actions bot added this to the Gutenberg 19.8 milestone Nov 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@gziolo gziolo gziolo approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

Assignees
No one assigned
Labels
[Block] Search Affects the Search Block - used to display a search field Good First Review A PR that's suitable for someone looking to contribute for the first time by reviewing code [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
Gutenberg 19.8
Development

Successfully merging this pull request may close these issues.

Search block button text overlapping.
4 participants
@snehapatil2001 @gziolo @youknowriad @t-hamano